<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Flip Clock</title>
  <link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">	
    <ul class="flip hourPlay2">
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">0</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">0</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">1</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">1</div>
                </div>
            </a>
        </li>
    </ul>
    <ul class="flip hourPlay">
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">0</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">0</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">1</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">1</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">2</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">2</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">3</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">3</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">4</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">4</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">5</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">5</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">6</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">6</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">7</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">7</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">8</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">8</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">9</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">9</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">0</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">0</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">1</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">1</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">2</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">2</div>
                </div>
            </a>
        </li>
    </ul>
	<span class="blinker">:</span>
    <ul class="flip minutePlay2">
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">0</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">0</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">1</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">1</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">2</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">2</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">3</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">3</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">4</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">4</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">5</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">5</div>
                </div>
            </a>
        </li>
    </ul>
    <ul class="flip minutePlay">
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">0</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">0</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">1</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">1</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">2</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">2</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">3</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">3</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">4</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">4</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">5</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">5</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">6</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">6</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">7</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">7</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">8</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">8</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">9</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">9</div>
                </div>
            </a>
        </li>
    </ul>
	<span class="blinker">:</span>
    <ul class="flip secondPlay2">
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">0</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">0</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">1</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">1</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">2</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">2</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">3</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">3</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">4</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">4</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">5</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">5</div>
                </div>
            </a>
        </li>
    </ul>
    <ul class="flip secondPlay">
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">0</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">0</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">1</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">1</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">2</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">2</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">3</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">3</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">4</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">4</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">5</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">5</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">6</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">6</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">7</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">7</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">8</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">8</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">9</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">9</div>
                </div>
            </a>
        </li>
    </ul>
    <ul class="flip period" style="transform: scale(0.5);font-size: 50px;">
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">A</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">A</div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">P</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">P</div>
                </div>
            </a>
        </li>
    </ul>
	
    <ul class="flip period" style="transform: scale(0.5);font-size: 50px;margin-left:-30px;">
        <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">M</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">M</div>
                </div>
            </a>
        </li>
    </ul>
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="./script.js"></script>

</body>
</html>
